<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>滑动时钟</title>

    <style>
      body {
        text-align: center;
        background-color: #0e141b;
        color: rgba(224, 230, 235, 0.89);
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 300;
        overflow: hidden;
      }

      .column,
      .colon {
        display: inline-block;
        vertical-align: top;
        font-size: 200px;
        line-height: 200px;
      }

      .column {
        -webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms;
        transition: transform 300ms;
        transition: transform 300ms, -webkit-transform 300ms;
      }

      .colon {
        -webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms;
        transition: transform 300ms;
        transition: transform 300ms, -webkit-transform 300ms;
        -webkit-transform: translateY(calc(50vh - 120px));
        transform: translateY(calc(50vh - 120px));
      }
      .colon:after {
        content: ":";
      }

      .num {
        -webkit-transition: opacity 500ms, text-shadow 100ms;
        transition: opacity 500ms, text-shadow 100ms;
        opacity: 0.025;
      }
      .num.visible {
        opacity: 1;
        text-shadow: 1px 1px 0px #336699;
        font-weight: bold;
      }
      .num.close {
        opacity: 0;
      }
      .num.far {
        opacity: 0;
      }
      .num.distant {
        opacity: 0;
      }
      #notifyBtn{
        position: absolute;
        top: 0;
        left: 0;
      }
      #dingyue{
        position: absolute;
        top: 0;
        left: 200px;
      }
      #qxdingyue{
        position: absolute;
        top: 0;
        left: 300px;
      }
    </style>
  </head>
  <body>
    <div class="column">
      <div class="num">0</div>
      <div class="num">1</div>
      <div class="num">2</div>
    </div>
    <div class="column">
      <div class="num">0</div>
      <div class="num">1</div>
      <div class="num">2</div>
      <div class="num">3</div>
      <div class="num">4</div>
      <div class="num">5</div>
      <div class="num">6</div>
      <div class="num">7</div>
      <div class="num">8</div>
      <div class="num">9</div>
    </div>
    <div class="colon"></div>
    <div class="column">
      <div class="num">0</div>
      <div class="num">1</div>
      <div class="num">2</div>
      <div class="num">3</div>
      <div class="num">4</div>
      <div class="num">5</div>
    </div>
    <div class="column">
      <div class="num">0</div>
      <div class="num">1</div>
      <div class="num">2</div>
      <div class="num">3</div>
      <div class="num">4</div>
      <div class="num">5</div>
      <div class="num">6</div>
      <div class="num">7</div>
      <div class="num">8</div>
      <div class="num">9</div>
    </div>
    <div class="colon"></div>
    <div class="column">
      <div class="num">0</div>
      <div class="num">1</div>
      <div class="num">2</div>
      <div class="num">3</div>
      <div class="num">4</div>
      <div class="num">5</div>
    </div>
    <div class="column">
      <div class="num">0</div>
      <div class="num">1</div>
      <div class="num">2</div>
      <div class="num">3</div>
      <div class="num">4</div>
      <div class="num">5</div>
      <div class="num">6</div>
      <div class="num">7</div>
      <div class="num">8</div>
      <div class="num">9</div>
    </div>
    <button id="notifyBtn">Notify</button>
    <button id="dingyue">Ding yue</button>
    <button id="qxdingyue">qxDing yue</button>
    <script src="https://lecepin.gitee.io/vip_video_uni/js/uni.webview.js"></script>
    <script src="./app.js"></script>
  </body>
</html>
